function User() {
  this.addListener();
  // 加载第一页数据
  this.loadData(1); //不传参默认加载第一页数据
}

User.UserRowTemplate = `
  <tr>
    <td class="prodid"><%= _id %></td>
    <td><%= username %></td>
    <td><%= sex %></td>
    <td><%= birthdate %></td>
    <td><%= phone %></td>
    <td><%= userType %></td>
    <td>
      <input type="image" class="read" id="read" data-toggle="modal" data-target="#lookUserModal" src="/images/read.png">
      <input type="image" class="xiugai" id="xiugai" data-toggle="modal" data-target="#xiugaiUserModal" src="/images/xiugai.png">
      <input type="image" class="schu" id="schu" src="/images/schu.png">
    </td>
  </tr>
`;

$.extend(User.prototype, {
  // 注册事件监听
  addListener() {
    // 添加用户
    $(".btn-add-user").on("click",this.addUserHandler);
    // 点击翻页
    $(".pagination").on("click","a", $.proxy(this.loadDataHandler,this));
    // 点击查看用户信息
    $(".table-user-tb").on("click",".read",this.lookUserHandler);
    // 点击加载修改用户信息
    $(".table-user-tb").on("click",".xiugai",this.xiugaiUserHandler);
    // 点击提交修改
    $(".btn-update-user").on("click",this.updateUserHandler);
    // 删除用户信息
    $(".table-user-tb").on("click",".schu",this.schuUserHandler);
    // 模糊查询用户
    $(".btn-submit").on("click",this.queryUser);
  },
  // 翻页处理
  loadDataHandler(event) {
    const $src = $(event.target);
    const page = Number($(event.target).text());
    this.loadData(page);
    // 标签使用类名处理
    $src.parent("li").addClass("active").siblings("li").removeClass("active");
  },


  // 加载数据
  loadData(page) {
    // 默认查询第1页的数据
    page = page || 1;
    // "/api/positions/find_by_page?page=1"
    const url = "/api/users/find_by_page?page=" + page;
    // get 请求
    $.getJSON(url,(data)=>{
      if(data.res_code === 1){
        let html = "";
        data.res_body.list.forEach((curr)=>{
          html += ejs.render(User.UserRowTemplate,curr);
        });
        $(".table-user tbody").html(html);
      }
    });

  },

  //模糊查询用户
  queryUser(){
    const url="/api/users/query";
    let username = $(".query-name-input").val();
    
    $.getJSON(url,{username},(data)=>{
      console.log(123);
      let html ="";
      data.res_body.data.forEach((curr,index)=>{
        html += ejs.render(User.UserRowTemplate,curr);

        // str+=`<tr>
        //         <td>${index+1}</td>
        //         <td>${curr.username}</td>
        //         <td>${curr.sex}</td>
        //         <td>${curr.reg_time}</td>
        //         <td>${curr.tell}</td>
        //         <td>${curr.type}</td>
        //         <td class="hidden">${curr._id}</td>
        //         <td>
        //           <a data-toggle="modal" data-target="#updateModal" href="javascript:;" class="position-update" data-toggle="modal" data-target="#modifyModal"><img src="/images/updata.png" alt="" /></a>
        //           <a  class="position-del" href="javascript:;"><img src="/images/schu.png" alt="" /></a>
        //         </td>
        //       </tr>`;
      });
      //console.log(html);
      $(".table-user tbody").html(html);
      // $(".message-table tbody").html(str);
      $(".page-user").addClass("hidden");
      //User.prototype.loadData();
    });
  },

  // 添加用户处理
  addUserHandler() {
    // 获取表单中的数据
    // URL
    const url = "/api/users/add";
    // 向服务器发送的数据
    const data = $(".form-add-user").serialize();
    console.log(data);
    // 发送请求
    $.ajax({
      type: "post",
      url: url,
      data: data,
      dataType: "json",
      // processData: false, // 不将 data 数据转换为查询字符串
      // contentType: false, // 不使用默认的 "application/x-www-form-urlencoded"
      success: function(data) {
        console.log(data);
        if (data.res_body.status === 1) { // 添加成功，使用 ejs 浏览器端模板渲染
          // data.res_body.data
          // 使用 ejs 模板渲染
          const html = ejs.render(User.UserRowTemplate, data.res_body.data)
          // 显示
          $(".table-user tbody").append(html);
          // 关闭模态框
          $("#addUserModal").modal("hide");
          location.reload();
        } else { // 添加失败
          $(".add-user-error").removeClass("hidden");
        }
      }
    });
  },

  // 查询用户处理
  lookUserHandler() {
    // 获取表单中的数据
    // URL
    const id = $(this).parents('tr').find('.prodid').text();
    //console.log(id);
    const url = "/api/users/find_by_id?id=" + id;
    // 发送请求
    $.ajax({
      type: "get",
      url: url,
      //data: data,
      dataType: "json",
       processData: false, // 不将 data 数据转换为查询字符串
       contentType: false, // 不使用默认的 "application/x-www-form-urlencoded"
      success: function(data) {
        console.log(data);
        $("#lookUserName").val(data.res_body.list.username);
        $("#lookPassword").val(data.res_body.list.password);
        $("#sex1").val(data.res_body.list.sex);
        $("#lookBirthDate").val(data.res_body.list.birthdate);
        $("#lookUserPhone").val(data.res_body.list.phone);
        $("#lookUserAddress").val(data.res_body.list.address);
        $("#userType1").val(data.res_body.list.userType);
      }
    });
  },
  // 修改用户处理
  xiugaiUserHandler() {
    // 获取表单中的数据
    // URL
    const id = $(this).parents('tr').find('.prodid').text();
    const url = "/api/users/find_by_id?id=" + id;
    // 发送请求
    $.ajax({
      type: "get",
      url: url,
      //data: data,
      dataType: "json",
      processData: false, // 不将 data 数据转换为查询字符串
      contentType: false, // 不使用默认的 "application/x-www-form-urlencoded"
      success: function(data) {
        console.log(data.res_body);
        $("#id").val(data.res_body.list._id);
        $("#xiugaiUserName").val(data.res_body.list.username);
        $("#xiugaiPassword").val(data.res_body.list.password);
        $("#sex2").val(data.res_body.list.sex);
        $("#xiugaiBirthDate").val(data.res_body.list.birthdate);
        $("#xiugaiUserPhone").val(data.res_body.list.phone);
        $("#xiugaiUserAddress").val(data.res_body.list.address);
        $("#userType2").val(data.res_body.list.userType);
      }
    });
  },
  // 提交修改，更新用户信息
  
  updateUserHandler() {
    // const id = $(this).parents('tr').find('.prodid').text();
    //console.log(id);
    const url = "/api/users/update";
    const formData= $(".form-xiugai-user").serialize();
    // console.log(formData);
    $.ajax({
      type:"post",
      url:url,
      data:formData,
      dataType: "json",
      // processData: false, // 不转换 data 向服务器提交的数据（默认是将对象转换为查询字符串）
      // contentType: false,
      success(data){
        console.log(data);
        // 关闭模态框
        $("#xiugaiUserModal").modal("hide");
        // 刷新页面
        // location.reload();
        User.prototype.loadData(1);
        // console.log(User.prototype.loadData());
      }
    });
  },

  

  // 删除用户
  schuUserHandler() {
    // 获取表单中的数据
    const id = $(this).parents('tr').find('.prodid').text();
    console.log(id);
    // URL
    const url = "/api/users/delete?id=" + id;
    //let formData= $(".update-user-form").serialize();
    // 向服务器发送的数据
     $.ajax({
      type:"post",
      url,
      //data:formData,
      processData: false, // 不转换 data 向服务器提交的数据（默认是将对象转换为查询字符串）
      contentType: false,
      success(data){
        // 刷新页面
        console.log(111);
        window.location.reload();
      }
    });
  }
});

new User();